/* eslint-disable vue/no-side-effects-in-computed-properties */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable camelcase */
import { computed, defineComponent, PropType } from 'vue';
import { useNamespace } from '@ibiz-template/vue3-util';
import {
  GridFieldColumnController,
  GridRowState,
} from '@ibiz-template/runtime';
import dayjs from 'dayjs';
import { clone } from 'ramda';
import { CheckinMonthGridController } from '../checkin-month-grid.controller';
import './checkin-month-grid-column.scss';

export const CheckInMonthGridColumn = defineComponent({
  name: 'IBizCheckInMonthGridColumn',
  props: {
    row: {
      type: GridRowState,
      required: true,
    },
    data: {
      type: Object as PropType<IData>,
      required: true,
    },
    controller: {
      type: Object as PropType<GridFieldColumnController>,
      required: true,
    },
    details: {
      type: Array as PropType<IData[]>,
      required: true,
    },
  },
  setup(props) {
    const ns = useNamespace('month-grid-column');
    const c = props.controller;
    const grid = c.grid as CheckinMonthGridController;

    const blackKeys = ['NORMAL'];
    const dangerKeys = ['MISSING', 'ABNORMAL', 'LATE', 'LEAVE_EARLY', 'ABSENT'];

    const timeToSeconds = (time: string) => {
      const date = dayjs(time);
      if (date.isValid()) {
        return date.unix();
      }
      const [h, m, s] = time.split(':').map(Number);
      return h * 3600 + m * 60 + s;
    };

    const timeDetails = computed(() => {
      if (props.details) {
        const items = clone(props.details);
        items.sort(
          (a: IData, b: IData) =>
            timeToSeconds(a.checkin_time) - timeToSeconds(b.checkin_time),
        );
        return items;
      }
      return [];
    });

    const renderSpan = (detail: IData) => {
      const item = grid.attendanceTypes.find(
        x => x.value === detail.checkin_result,
      );
      if (item) {
        return <span class={ns.is('blue', true)}>{item.text}</span>;
      }
      return (
        <span
          class={[
            ns.is('black', blackKeys.includes(detail.checkin_result)),
            ns.is('danger', dangerKeys.includes(detail.checkin_result)),
          ]}
        >
          {detail.checkin_time}
        </span>
      );
    };

    const onCellClick = (event: MouseEvent): void => {
      if (props.controller.isLinkColumn) {
        event.stopPropagation();
        grid.openLinkView(props.row, props.data, event, c);
      } else if (props.controller.hasAction) {
        event.stopPropagation();
        // 阻止触发行点击
        props.controller.triggerAction(props.row, event);
      }
    };

    return {
      c,
      ns,
      timeDetails,
      renderSpan,
      onCellClick,
    };
  },
  render() {
    return (
      <div
        class={[
          this.ns.b(),
          this.c.clickable(this.row) && this.ns.m('clickable'),
          this.ns.m(this.controller.grid.overflowMode),
          this.controller.model.cellSysCss?.cssName,
          this.ns.is('has-action', !!this.c.model.deuiactionGroup),
          this.ns.is('link', !!this.c.isLinkColumn),
        ]}
        onClick={this.onCellClick}
      >
        {this.timeDetails.map((detail: IData) => {
          return this.renderSpan(detail);
        })}
      </div>
    );
  },
});
